<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <body>
        <ui:composition template="./resources/sTemplate.xhtml">
            <ui:define name="content">
                <p:growl id="msgs" showDetail="true" />
                <div class="container" >
                    <h:form id="formDataTable">
                        <p:dataTable id="dataTable" 
                                     value="#{cargosBean.lista}" 
                                     var="var" 
                                     paginator="true" 
                                     rows="10"  
                                     paginatorPosition="bottom" 
                                     pageLinks="5"
                                     paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {CurrentPageReport}"  
                                     rowsPerPageTemplate="10,20,30,50,100">

                            <p:column headerText="Cargo" >  
                                <h:outputText value="#{var.cargo}" />  
                            </p:column>

                            <p:column style="width:4%">  
                                <p:commandButton id="selectButton" update=":formUpdate" 
                                                 oncomplete="PF('dialogUpdate').show()" icon="ui-icon-pencil" 
                                                 title="View" >  
                                    <f:setPropertyActionListener value="#{var}" target="#{cargosBean.objSeleccionado}" />  
                                </p:commandButton>  
                            </p:column>
                        </p:dataTable>
                    </h:form>
                    <!--                        
                    
                    Dialogo de Creacion de registro          
                                            
                    -->
                    <h:form id="formInsert">
                        <p:dialog header="Adicionar" widgetVar="dialogInsert" resizable="false" id="dlgInsert"  
                                  showEffect="fade" hideEffect="drop" modal="true">  

                            <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">  

                                <h:outputText value="Cargo:" />  
                                <h:inputText value="#{cargosBean.objSeleccionado.cargo}" 
                                             size="60" style="text-transform: uppercase;"/>  
                                <f:facet name="footer">
                                    <p:separator/>
                                    <p:commandButton id="insertarBtn"
                                                     value="Adicionar"  
                                                     update=":formDataTable:dataTable, :msgs" 
                                                     oncomplete="PF('dialogInsert').hide()" 
                                                     actionListener="#{cargosBean.insert(actionEvent)}"/>

                                    <p:commandButton id="cancelarAgregar"
                                                     value="Cancelar"
                                                     update=":formInsert:display" 
                                                     oncomplete="PF('dialogInsert').hide()" />

                                </f:facet>
                            </h:panelGrid>  
                        </p:dialog>  
                    </h:form>

                    <!--                        
                    
                    Dialogo de Edicion de registro          
                                            
                    -->
                    <h:form id="formUpdate">
                        <p:dialog header="Modificar" widgetVar="dialogUpdate" resizable="false" id="dlgUpdate"  
                                  showEffect="fade" hideEffect="drop" modal="true">  

                            <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">  
                                <h:outputText value="Cargo:" />  
                                <h:inputText value="#{cargosBean.objSeleccionado.cargo}" 
                                             size="60" style="text-transform: uppercase;"/>  
                                <f:facet name="footer">
                                    <p:separator/>
                                    <p:commandButton id="actualizarBtn"
                                                     value="Actualizar"  
                                                     update=":formDataTable:dataTable, :msgs" 
                                                     oncomplete="PF('dialogUpdate').hide()" 
                                                     actionListener="#{cargosBean.update(actionEvent)}"/>

                                    <p:commandButton id="cancelarAgregar"
                                                     value="Cancelar"
                                                     update=":formUpdate:display" 
                                                     oncomplete="PF('dialogUpdate').hide()" 
                                                     />

                                </f:facet>
                            </h:panelGrid>  
                        </p:dialog>  
                    </h:form>
                </div>
            </ui:define>
        </ui:composition>
    </body>
</html>
